<template>
	<u-popup v-model="search" mode="bottom" border-radius="20" @open="init" @close="cancel">
		<view class="s-form">
			<view class="s-title">筛选</view>
			<view class="s-box">
				<view class="s-label">年龄</view>
				<view class="age-box">
					<view class="s-tag" @click="ageChange(aindex)" :class="ageIndex == aindex ? 'active' : ''" v-for="(age, aindex) in ageList" :key="aindex">{{age.text}}</view>
				</view>
			</view>
			<view class="s-box">
				<view class="s-label">性别</view>
				<view class="age-box">
					<view class="s-tag" @click="sexChange(index)" :class="sexIndex == index ? 'active' : ''" v-for="(sex, index) in sexList" :key="index">{{sex.text}}</view>
				</view>
			</view>
			<!-- <view class="s-box">
				<view class="s-label">距离</view>
				<view class="age-box">
					<view class="s-tag" @click="miChange(mindex)" :class="miIndex == mindex ? 'active' : ''" v-for="(mi, mindex) in miList" :key="mindex">{{mi.text}}</view>
				</view>
			</view> -->
			<view class="btn-box" :class="(ageIndex < 0 && sexIndex < 0 && miIndex < 0) ? 'btn-disabled' : ''" @click="ok">确定</view>
		</view>
	</u-popup>
</template>

<script>
	import {mapState} from 'vuex';
	import cashCoin from "@/components/cash-popup/cashCoin";	//充值
	export default {
		components: {
			cashCoin,
		},
		data() {
			return {
				min: 18,
				max: 18,
				ageIndex: -1,
				sexIndex: -1,
				miIndex: -1,
				ageList: [
					{
						text: '全部',
						min: 0,
						max: 100,
					},
					{
						text: '18~23',
						min: 18,
						max: 23,
					},
					{
						text: '23~28',
						min: 23,
						max: 28,
					},
					{
						text: '28~33',
						min: 28,
						max: 33,
					},
					{
						text: '33~38',
						min: 33,
						max: 38,
					},
					{
						text: '38~43',
						min: 38,
						max: 43,
					},
					{
						text: '43~48',
						min: 43,
						max: 48,
					},
					{
						text: '48~53',
						min: 48,
						max: 53,
					},
				],
				sexList: [
					{
						text: '全部',
						value: '',
					},
					{
						text: '男',
						value: '0',
					},
					{
						text: '女',
						value: '1',
					},
				],
				miList: [
					{
						text: '5KM',
						value: 5000,
					},
					{
						text: '10KM',
						value: 10000,
					},
					{
						text: '15KM',
						value: 15000,
					},
					{
						text: '20KM',
						value: 20000,
					},
					{
						text: '25KM',
						value: 25000,
					},
					{
						text: '30KM',
						value: 30000,
					},
					{
						text: '35KM',
						value: 35000,
					},
					{
						text: '40KM',
						value: 40000,
					},
				],
				search: false,
			}
		},
		computed: {
			...mapState(['vuex_query']),
		},
		methods: {
			init() {
				this.max = this.vuex_query.max;
				this.min = this.vuex_query.min;
			},
			ageChange(i) {
				this.ageIndex = i;
			},
			sexChange(i) {
				this.sexIndex = i;
			},
			miChange(i) {
				this.miIndex = i;
			},
			ok() {
				if(this.ageIndex < 0 && this.sexIndex < 0 && this.miIndex < 0){
					return;
				}
				var query = this.vuex_query;
				if(this.ageIndex > -1){
					query.max = this.ageList[this.ageIndex].max;
					query.min = this.ageList[this.ageIndex].min;
				}
				if(this.sexIndex > -1){
					query.sex = this.sexList[this.sexIndex].value;
				}
				if(this.miIndex > -1){
					query.mi = this.miList[this.miIndex].value;
				}
				this.$store.commit('setQuery', query);
				this.$emit('query');
				this.search = false;
			},
			handerChooseLocation () {
			  uni.chooseLocation({
			    success: (res) => {
			  	  this.updateLocation(res.latitude, res.longitude);
			    },
			    fail: function (err) {
			        console.log('取消按钮', err)
			    }
			  });
			},
			doCity() {
				this.$u.route({
					url: '/pages/index/user/city',
				});
			},
			updateLocation(lat,lng) {
				this.$u.put('/system/user/profile',{
					lat: lat,
					lon: lng,
				}).then(res => {
					this.doCity();
				})
			},
			more() {
				this.$u.route({
					url: 'pages/index/user/menu',
				});
			},
			open() {
				this.search = true;
			},
			cancel() {
				this.search = false;
			},
			minEnd() {
				if(this.max < this.min){
					this.max = this.min;
				}
			},
			maxEnd() {
				if(this.max < this.min){
					this.min = this.max;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s-form {
		padding: 20px;
		padding-bottom: 100px;
	}
	.s-title {
		font-size: 38rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		justify-content: center;
		margin-bottom: 15px;
	}
	.s-label {
		font-size: 30rpx;
		margin-top: 10px;
		margin-bottom: 10px;
		color: black;
	}
	.s-age {
		display: flex;
		align-items: center;
		margin: 30px 0;
	}
	.s-slider {
		flex: 1;
	}
	.btn-box {
		background-color: #283242;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		border-radius: 20px;
		font-size: 30rpx;
		color: #fff;
		margin-top: 20px;
	}
	.sex-btn {
		background-color: #2979ff;
		border-radius: 20px;
		padding: 3px 10px;
		color: #fff;
		display: flex;
		justify-content: center;
		margin-left: 10px;
	}
	.more {
		margin-bottom: 15px;
		background-color: #19be6b;
	}
	.s-box {
		display: flex;
		flex-direction: column;
	}
	.age-box {
		display: flex;
		flex-wrap: wrap;
	}
	.s-tag {
		border: 1px solid #ddd;
		border-radius: 40px;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		height: 25px;
		width: 60px;
		margin-bottom: 15px;
	}
	.active {
		background-color: #ddd;
		font-weight: bold;
	}
	.btn-disabled {
		background-color: #ddd;
	}
</style>
